<template>
  <div>
    <!-- 标题 -->
    <h3 class="tit">{{ title + (totalComment ? '(' + totalComment + ')' : '') }}</h3>
    <!-- 评论主体 -->
    <div class="itm" v-for="itm in comment" :key="itm.commentId">
      <!-- 头像盒子 -->
      <div class="head">
        <a
          :href="'/user/home?id=' + itm.user.userId"
          @click.prevent="$router.push('/user/home?id=' + itm.user.userId)"
          ><img :src="itm.user.avatarUrl + '?param=50y50'" alt=""
        /></a>
      </div>
      <!-- 内容盒子 -->
      <div class="cntwrap">
        <!-- 用户名和内容 -->
        <div class="cnt">
          <a
            :href="'/user/home?id=' + itm.user.userId"
            class="username"
            @click.prevent="$router.push('/user/home?id=' + itm.user.userId)"
            >{{ itm.user.nickname }}</a
          >：{{ itm.content }}
        </div>
        <div class="rp">
          <!-- 评论时间 -->
          <div class="time">{{ itm.time | DateFormat }}</div>
          <!-- 点赞 -->
          <a href="javascript:;" @click="$Message({msg:'功能未开发'})" class="like"
            ><i class="u-icn2"></i> <i v-if="itm.likedCount">({{ itm.likedCount }})</i></a
          >
          <span class="sep">|</span>
          <a href="javascript:;" @click="$Message({msg:'功能未开发'})" class="reply">回复</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { DateFormat } from '@/utils/filters.js'
export default {
  props: {
    comment: { type: Array, required: true },
    title: { type: String, default: '最新评论' },
    totalComment: {type: Number}
  },
  filters: {
    DateFormat
  }
}
</script>

<style lang="less" scoped>
.tit {
  position: relative;
  top: 1px;
  height: 20px;
  text-align: left;
  font-size: 100%;
  border-bottom: 1px solid #cfcfcf;
}
.itm {
  padding: 15px 0;
  border-top: 1px dotted #ccc;
  .head {
    float: left;
    width: 50px;
    height: 50px;
    a {
      display: block;
      width: 50px;
      height: 50px;
      img {
        float: left;
        width: 50px;
        height: 50px;
        vertical-align: middle;
      }
    }
  }
  .cntwrap {
    margin-left: 60px;
    text-align: left;
    .cnt {
      width: 100%;
      overflow: hidden;
      line-height: 20px;
      .username {
        margin-right: 5px;
        color: #0c73c2;
      }
    }
    .rp {
      margin-top: 15px;
      text-align: right;
      .time {
        float: left;
        margin: 0 !important;
        color: #999;
      }
      .like {
        .u-icn2 {
          margin-right: 5px;
          vertical-align: -2px;
          margin-top: -4px;
          width: 15px;
          height: 14px;
          display: inline-block;
          background-position: -150px 0;
          // background: url(../../assets/images/icon2.png) no-repeat -150px 0;
        }
      }
      .sep {
        margin: 0 8px;
        color: #ccc;
      }
      .reply {
      }
    }
  }
}
</style>
